<template>
  <view>
    <view class="box2">
      <view class="flow flex-y-center">
        <view class="line"></view>
        <view>
          <view class="item flex-y-center" v-for="(item,index) in flow" :key="index">
            <view class="dot flex-grow-0"></view>
            <view class="flex-grow-1">
              <view class="zuhe">
                <view class="name">
                  {{item.name}}
                </view>
                <view class="time"> {{item.time}}</view>
              </view>
              <view class="title">{{item.title}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const flow = ref([
    {
      time: '04-23 19:38',
      name: "已签收",
      title: '邮件投递到:传智学院干洗店代收点自提点,投递员:窦飞,电话:19816080568 风雨兼程送快递,只盼小主能满意。请点击“服务评价”反馈您的感受,助力EMS不断提升服务水平”',
    },
  {
    time: '04-23 15:46',
    name: "派送中",
    title: '【术阳常州路揽投部】安排投递,投递员:窦飞,电话:19816080568,揽投部电话:0527-83559661',
  },
  {
    time: '04-23 19:33',
    name: "运输中",
    title: '到达【沐阳常州路揽投部',
  }
  ,
     {
        time: '04-23 15:32',
        title: '离开【沭阳邮件处理中心】,下一站【阳常州路揽投部】'
      },
      {
        time: '04-23 13:26',
        title: '到达【沭阳邮件处理中】'
      },
      {
        time: '04-23 10:54',
        title: '到达【沭阳直投揽投部】'
      },
      {
        time: '04-23 10:53',
        title: '离开【沭阳邮件处理中心】,下一站【沭阳直投揽投部】'
      },
      {
        time: '04-23 09:55',
        title: '到达【沭阳邮件处理中心】'
      },
      {
        time: '04-23 06:51',
        title: '离开【宿迁市寄递事业部网路中心普服车间】,下一站【术阳邮件处理中心】'
      },
      {
        time: '04-23 05:01',
        title: '到达【宿迁市寄递事业部网路中心普服车间】'
      },
      {
        time: '04-22 23:42',
        title: '离开【江苏省寄递事业部南京市邮区中心东杨坊邮件处理中心】,下一站【宿迁市寄递事业部网路中心普服车间】'
      },
      {
        time: '04-22 08:39',
        title: '到达【江苏省寄递事业部南京市邮区中心东杨坊邮件处理中心】(经转)'
      },
      {
        time: '04-21 03:34',
        title: '离开【成都双流处理中心天府包件车间】,下一站【江苏省寄递事业部南京市邮区中心东杨坊邮件处理中】(经转)'
      },
      {
        time: '04-20 19:21',
        title: '到达成都双流处理中心天府包件车间'
      },
    {
      time: '04-20 11:42',
       title: '离开【宜宾市普服车间】,下一站【成都双流处理中心天府包件车间】',
      },
    {
    time: '04-20 11:30',
     title: '到达【宜宾市普服车间】',
    }, {
         time: '04-20 11:25',
     title: '离开【宜宾市电商客户直属揽投部】,下一站【宜宾市普服车间】',
    }, {
      time: '04-19 21:17',
      name: "已揽收",
      title: '【宜宾市电商客户直属揽投部】已收寄,揽投员:李长章',
    }, {
      time: '04-19 16:54',
      name: "已发货",
      title: '等待收取中',
    },
    {
      time: '04-19 15:11',
      name: "已下单",
      title: '商品已下单',
    }
   ])
</script>

<style scoped lang="scss">
  .box2 {
    background: #fff;
    margin: 0 20rpx;
    border-radius: 10rpx;

    .flow {
      position: relative;
      overflow: hidden;
      margin: 20rpx 30rpx;


      .line {
        height: 95%;
        width: 1px;
        background: #eff0f2;
        position: absolute;
        left: 9rpx;
        z-index: 0;
        margin-top: 100rpx;
      }

      .item {
        margin: 38rpx 0;

        .dot {
          width: 20rpx;
          height: 20rpx;
          background: #eff0f2;
          border-radius: 50%;
          position: relative;
          margin-right: 32rpx;
          top: 40rpx;
        }

        .flex-grow-1 {
          margin-left: 40rpx;
          color: #a5a5a5;

          .zuhe {
            display: flex;

            .name {
              font-size: 0.8rem;
              margin-top: 5rpx;
              font-weight: 700;
              padding-right: 5rpx;
            }

            .time {
              font-size: 0.75rem;
              margin-top: 5rpx;
            }
          }
        }
      }

      .item:nth-child(1) {
        color: #fc5100;
         .zuhe{
                    color: #fc5100;
         }
        .title {
          color: #333;
        }
        .dot {
          background: #fc5100;

        }
      }
    }
  }
</style>